import React, { useEffect, useState } from 'react';
import DeptYcppFx from './njekh/deptYcppFx';
import DeptZyFx from './njekh/deptZyFx';
import YwtxFx from './njekh/ywtxFx';
import ZhzhCard from './njekh/zhzhCard';
import FhSyCard from './njekh/fhSyCard';
import ZhSyAnalysis from './njekh/ZhSyAnalysis';
import { getJfData } from '@/services/homeNj';
import { Row, Col } from 'antd';
import DeptYcPp from './njekh/deptYcPp';
const Welcome: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [ny, setNy] = useState('default');
  const [heigth, setHeigth] = useState(500);
  const [jfData, setJfData] = useState<API.JfData | undefined>();
  useEffect(() => {
    setLoading(true);
    const screenHeight =
      window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    setHeigth(screenHeight - 292);
    getJfData(ny)
      .then(function (datas) {
        setJfData(datas);
      })
      .finally(function () {
        setLoading(false);
      });
  }, [ny]);
  if (!jfData) {
    return <div>loading...</div>;
  }
  return (
    <>
      <Row gutter={8}>
        <Col span={8}>
          <ZhzhCard title="总行挣回资源" data={jfData} height={196} loading={loading} />
        </Col>
        <Col span={8}>
          <FhSyCard title="分行使用资源" data={jfData} loading={loading} height={196} />
        </Col>
        <Col span={8}>
          <ZhSyAnalysis
            title="挣回和使用资源对比"
            data={jfData.zyZhAndSys}
            height={196}
            nfyf={jfData.nfyf}
            onChange={(val) => {
              setNy(val);
            }}
            loading={loading}
          />
        </Col>
      </Row>
      <Row gutter={8} style={{ marginTop: 8 }}>
        <Col span={7}>
          <DeptZyFx
            title="部门整体资源使用情况"
            datas={jfData!.deptJfDatas}
            height={heigth}
            itemType={1}
          />
          <DeptZyFx
            title="部门绩效使用情况"
            datas={jfData!.deptJfDatas}
            height={heigth}
            itemType={2}
          />
          <DeptZyFx
            title="部门费用使用情况"
            datas={jfData!.deptJfDatas}
            height={heigth}
            itemType={3}
          />
        </Col>
        <Col span={10}>
          <YwtxFx title="各条线资源预算执行率" data={jfData!.relationDatas} height={heigth} />
        </Col>
        <Col span={7}>
          <DeptYcppFx title="部门业财匹配情况" datas={jfData!.deptJfDatas} height={heigth} />
          <DeptYcPp
            title="部门业财匹配排名"
            datas={jfData!.deptJfDatas}
            height={heigth}
            itemType={4}
          />
        </Col>
      </Row>
    </>
  );
};

export default Welcome;
